<template>
  <div class="container">
    <div class="one" id="one-Bottom-left-one">
      接口调用次数统计
    </div>
    <div class="two" id="one-Bottom-left-two">
      <div :class="activeIndex === 0 ? 'active' : ''" @click="clickTab(0)">
        10分钟
      </div>
      <div :class="activeIndex === 1 ? 'active' : ''" @click="clickTab(1)">
        30分钟
      </div>
      <div :class="activeIndex === 2 ? 'active' : ''" @click="clickTab(2)">
        1小时
      </div>
      <div :class="activeIndex === 3 ? 'active' : ''" @click="clickTab(3)">
        一天
      </div>
    </div>
    <div class="three" id="one-Bottom-left-header">
      <div class="header">
        <span class="span">接口号</span>
        <span class="span-name">接口名称</span>
        <span class="span">调用次数</span>
        <span class="span">失败次数</span>
        <span class="span">失败率</span>
        <span class="span">超时次数</span>
        <span class="span">超时率</span>
      </div>
      <div class="body son" v-for="(item, index) in dataList" :key="index">
        <span class="span">{{ item.interfaceCode }}</span
        ><span class="span-name">{{ item.interfaceName }}</span
        ><span class="span">{{ item.callSum }}</span
        ><span class="span">{{ item.failSum }}</span
        ><span class="span">{{ item.failPct }}</span
        ><span class="span">{{ item.longTimeSum }}</span
        ><span class="span">{{ item.longTimePct }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'oneBottomLeft',
  data () {
    return {
      activeIndex: 0,
      text: '',
      t: '',
      list: [
        { index: 0, count: 10 },
        { index: 1, count: 20 },
        { index: 2, count: 30 },
        { index: 3, count: 40 }
      ],
      dataList: [
        {
          interfaceCode: '124002',
          interfaceName: '标签库接口',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: '测试接口',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: 'test',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: 'test',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: 'test',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: 'test',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: 'test',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        },
        {
          interfaceCode: '124002',
          interfaceName: 'test',
          callSum: '1000',
          failSum: '100',
          failPct: '10%',
          longTimeSum: '100',
          longTimePct: '10%'
        }
      ]
    }
  },
  created () {
    let that = this
    that.t = setInterval(function () {
      // console.log('123')
      that.activeIndex++
      if (that.activeIndex === 4) {
        that.activeIndex = 0
      }
    }, 2000)
    console.log(that.t)
  },
  mounted () {
    // this.dataList = this.initData.interfaceCallNumStatistics.tenMinute
  },
  destroyed () {
    clearInterval(this.t)
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        switch (val) {
          case 0:
            return (this.dataList = this.initData.interfaceCallNumStatistics.tenMinute)
          case 1:
            return (this.dataList = this.initData.interfaceCallNumStatistics.thirtyMinute)
          case 2:
            return (this.dataList = this.initData.interfaceCallNumStatistics.oneHour)
          case 3:
            return (this.dataList = this.initData.interfaceCallNumStatistics.oneDay)
          default:
            return (this.dataList = this.initData.interfaceCallNumStatistics.tenMinute)
        }
      }
    }
  },
  computed: {
    ...mapState(['initData'])
  },
  methods: {
    clickTab (val) {
      let that = this
      console.log(val)
      clearInterval(this.t)
      this.activeIndex = val
      that.t = setInterval(function () {
        that.activeIndex++
        if (that.activeIndex === 4) {
          that.activeIndex = 0
        }
      }, 2000)
      console.log(that.t)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url('../../assets/image/width.png') no-repeat 0px 0px;
  background-size: 100% 100%;
  // background-color: rgb(132, 193, 218, 0.1);
  .one {
    width: 940px;
    height: 110px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 10%;
    font-size: 35px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #66e2e2;
    background: url('../../assets/image/widthTipbg.png') no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .two {
    height: 63px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 45px;
    margin-left: 45px;
    box-sizing: border-box;
    display: flex;
    font-size: 25px;
    justify-content: space-evenly;
    align-items: center;
    div {
      width: 171px;
      height: 63px;
      // border: 1px solid #000;
      display: flex;
      font-size: 25px;
      justify-content: center;
      align-items: center;
      color: #acd7e8;
      background: url('../../assets/image/notSelected.png') no-repeat 0px 0px;
      background-size: 100% 100%;
      &.active {
        background: url('../../assets/image/selected.png') no-repeat 0px 0px;
        background-size: 100% 100%;
        color: #51f3f1;
      }
    }
  }
  .three {
    height: 630px;
    // border: 1px solid #000;
    margin-right: 45px;
    margin-left: 45px;
    margin-bottom: 30px;
    color: white;
    .son {
      &:nth-child(odd) {
        background-color: #042e5d;
        // opacity: 0.4;
        font-size: 15px;
      }
      &:nth-child(even) {
        background-color: rgba(0, 20, 47, 0.64);
        // opacity: 1;
        font-size: 15px;
      }
    }

    .header {
      padding-left: 4%;
      padding-right: 4%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #042e5d;
      text-align: center;
      font-size: 20px;
      .span {
        // border: 1px solid #000;
        width: 13%;
      }
      .span-name {
        // border: 1px solid #000;
        width: 20%;
      }
    }
    .body {
      padding-left: 4%;
      padding-right: 4%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .span {
        // border: 1px solid #000;
        width: 13%;
      }
      .span-name {
        width: 20%;
      }
    }
  }
  //   .three:nth-child(1) {
  //     background-color: tomato;
  //   }
  //   .three:nth-child(2) {
  //     background-color: rgb(89, 71, 255);
  //   }
}
</style>
